<!-- 邀请好友绑定结果 -->
<template>
  <div class="page">
    <div>
      <img src="~assets/images/invitation/result.png" alt="" class="banner">
      <div class="form">
        <form>
          <a :href="downloadUrl" class="submit" download="cvn-wallet" @click="download">下载人人钱包APP</a>
        </form>
      </div>
      <div class="rule">
        <h3 class="btitle">邀请规则说明</h3>
        <ul>
          <li>1、好友接受邀请后，每产生一笔真实交易矿工费，会产生相应比例的返佣。</li>
          <li>2、返佣的形式以CVNT形式返佣到您的交易账户，CVNT返佣比例为30%。</li>
          <li>3、好友交易返佣当日统计，次日晚到账；返佣额(CVNT)= 矿工费*返佣比例。</li>
          <li>4、邀请人永久享受好友交易产生手续费的返佣。</li>
          <li>5、如发现邀请人账户异常，人人钱包有权对该账户下返佣活动进行无效处理。</li>
          <li>活动如有调整，以人人钱包更新为准，最终解释权归人人钱包所有。</li>
        </ul>
      </div>
    </div>
  </div>


</template>

<script>

    import {
        minerRegister
    } from 'api'
  import {versions} from 'common/js/utl'
  import 'common/js/gt'
  let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
  let emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/


  export default {
    data () {
      return {
          pwdReg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,20}$/,
          status: '',
          source: 1,
          sign: '',
          nodeNickname: '',
          code: null,
          nickname: '',
          phone_area: '86',
          phone_number: '',
          invite_code: '',
          password: ''
      }
    },
    created () {
      this.downloadUrl = versions.ios ? 'https://testflight.apple.com/join/HtU1EG7M' : 'http://appdown.rrys.tv/yqb_latest.apk'
    },
    methods: {
        toastTip (info) {
            this.$createToast({
                time: 2500,
                type: 'warn',
                txt: info
            }).show()
        },
      downloadTip () {
        this.$refs.tip.show()
        if (versions.android && versions.wechat) {
          this.$refs.tip.show()
          if (this.isTipShow) {
            return
          }
          this.isTipShow = true
          setTimeout(() => {
            this.$refs.tip.hide()
            this.isTipShow = false
          }, 2000)
        }
      },
      download (e) {
        return
        if(versions.ios){
          this.$warn('软件审核中，近期开放下载')
          e.preventDefault()
        }
        return
        try {
          let elemIF = document.createElement('iframe')
          elemIF.src = versions.ios ? 'https://itunes.apple.com/cn/app/%E4%BA%BA%E4%BA%BA%E5%BD%B1%E8%A7%86%E5%AD%97%E5%B9%95%E7%BB%84/id1052761459?mt=8' : 'http://appdown.rrys.tv/yqb_1.0.0.apk'
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        } catch (e) {

        }
      }
    }
  }
</script>

<style lang="scss">
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;

  .page {
    height: 100%;
    overflow: auto;
  }

  .banner {
    display: block;
    width: 100%;
    height: 570px;
    margin-bottom: -190px;
  }

  .stitle {
    margin: 0 23px;
    background: url("~assets/images/invitation/stitle.png") no-repeat center center;
    background-size: contain;
    height: 72px;
    line-height: 62px;
    font-size: 26px;
    color: #fff;
    text-align: center;
  }

  .rule {
    margin: 96px 58px 58px 58px;
    height:538px;
    background:rgba(121,70,207,1);
    border-radius:10px;
    ul {
      list-style: none;
      outline: none;
      padding: 0 17px;
      li {
        width:564px;
        font-size:26px;
        color:rgba(221,208,253,1);
        line-height:39px;
        margin-bottom: 12px;
      }
    }
  }

  .btitle {
    width: 284px;
    height: 46px;
    line-height: 46px;
    background: url("~assets/images/invitation/btitle.png") no-repeat center center;
    background-size: contain;
    font-size: 27px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    transform: translateY(-23px);
    margin: 0 auto 2px auto;
  }

  .index-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    line-height: 3;
    padding: 0 4em 0 1em;
  }

  .ct-ttl {
    height: 44px;
    padding-left: 12px;
    font-size: 16px;
    color: #939392;
    display: flex;
    align-items: center;
    &:before {
      content: '';
      background: $color;
      display: inline-block;
      width: 2px;
      height: 16px;
      margin-right: 5px;
    }
  }

  /*h2 {*/
    /*color: #333;*/
    /*font-size: 15px;*/
    /*text-align: center;*/
    /*margin-bottom: 8px;*/
  /*}*/

  .form {
    margin: 0 96px;
    font-size: 26px;
    input {
      color: #B8A8E2;
      font-size: 26px;
      background: transparent;
      /*&::placeholder {*/
        /*color: #939392;*/
      /*}*/
    }
  }

  .form-row {
    height:80px;
    border:2px solid rgba(184,168,226,1);
    display: flex;
    margin-bottom: 32px;
    input {
      flex: 1;
      text-indent: 23px;
    }
    &.code-input {
      input {
        width: 6em;
      }
    }
  }

  .area_num {
    width: 99px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    margin-right: 25px;
    &::after {
      content: '';
      display: inline-block;
      border: 9px solid transparent;
      border-top-color: #EBDDF8;
      width: 0;
      height: 0;
      margin-left: 15px;
      transform: translateY(5px);
      /*margin-top: 5px;*/

    }
  }

  .get-code {
    width: 198px;
    color: #fff;
    font-size: 24px;
    border-left: 2px solid #B8A8E2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button {
    display: block;
    margin: 30px auto 23px auto;
    width: 175px;
    height: 41px;
    background: linear-gradient(180deg, rgba(101, 130, 255, 1), rgba(78, 178, 254, 1));
    @include button(41px);
    color: #fff;
    font-size: 16px;
    margin-bottom: 15px;
  }


  .download {
    width:558px;
    height:80px;
    border:2px solid rgba(235,221,248,1);
    border-radius:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:26px;
    font-weight:600;
    color:rgba(255,255,255,1);
  }


  .valid-code-input {
    input {
      padding-left: 22px;
      flex: 1;
    }
  }


  .submit {
    font-size:26px;
    font-weight:600;
    color:rgba(89,27,195,1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("~assets/images/invitation/btn.png") no-repeat center center;
    background-size: contain;
    height: 80px;
    margin: 25px 0 32px 0;
  }


  .area_code {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 101;
    /*height: 100%;*/
    width: 100%;
    font-size: 26px;
    &.active {
      display: block;
    }
    .cube-index-list-fixed {
      display: none;
    }
    .cube-index-list-title {
      font-size: 26px;
    }
    .cube-index-list-anchor {
     font-size: 26px;
    }
    .cube-index-list-nav>ul>li{
      font-size: 26px;
    }
  }

  .cube-index-list.choose-area {
    /*position: fixed;*/
    /*left: 0;*/
    /*top: 0;*/
    /*z-index: 101;*/
    height: 100%;
    width: 100%;
  }


  .tip {
    width:535px;
    font-size:24px;
    color:rgba(255,255,255,1);
    line-height:24px;
    white-space: nowrap;
  }

</style>
